<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .box {
            width: 600px;
            height: 500px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }

        .box img {
            width: 600px;
            height: 450px;
            background-color: #f00;
        }

        .message {
            display: flex;
            height: 50px;
        }

        .message input {
            flex-grow: 1;
        }

        .danMu {
            width: 600px;
            height: 450px;
            /* position: absolute;
            left: 600px;
            top: 0; */
            margin-left: 600px;
            margin-top: -450px;
            background-color: #eee;

        }

        .danMu li {
            position: absolute;
            display: flex;
            align-items: center;
        }

        .danMu img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="" alt="">
        <ul class="danMu">
            <!-- <li>
                <img src="https://img10.360buyimg.com/img/jfs/t1/50166/9/22920/11310/63a1993cE3800216e/105f3d456f0905bb.jpg"
                    alt="">
                <span>发送的内容</span>
            </li> -->
        </ul>
        <div class="message">
            <input type="text">
            <button class="send">发送</button>
        </div>
    </div>


    <script>

        // 在生成li标签的时候，
        //    1 字符串拼接   ---  无法给生成的这个标签绑定样式
        //    2 创建li标签   
        //    3 弹幕运动结束以后要删除这个节点



        let oInp = document.querySelector('input');
        let oBtn = document.querySelector('.send');
        let oUl = document.querySelector('ul');
        let oDanMu = document.querySelector('.danMu');

        // 按钮可以添加倒计时 --- 10s以后可以再次发送
        oBtn.addEventListener('click', function () {
            // 获取输入框的值
            let inpVal = oInp.value.trim();
            // if(!inpVal) return ;
            if (inpVal) {
                // 清空输入框的内容
                oInp.value = '';
                // let res = `
                //     <li>
                //         <img src="https://img10.360buyimg.com/img/jfs/t1/50166/9/22920/11310/63a1993cE3800216e/105f3d456f0905bb.jpg"
                //             alt="">
                //         <span>${inpVal}</span>
                //     </li>
                // ` ;
                // oUl.innerHTML += res;
                // let oLi = oUl.querySelector('li');  // 获取的始终是第一个   --- 找不到生成的那一个Li


                // 创建一个li标签
                let oLi = document.createElement('li');
                oLi.innerHTML = `
                    <img src="https://img10.360buyimg.com/img/jfs/t1/50166/9/22920/11310/63a1993cE3800216e/105f3d456f0905bb.jpg"alt="">
                    <span>${inpVal}</span>
                `
                oUl.appendChild(oLi);
                // 随机位置
                let maxY = oDanMu.clientHeight - oLi.offsetHeight;
                let y = rand(0, maxY);
                oLi.style.top = y + 'px';
                // 随机颜色
                oLi.style.color = randColor();

                move(oLi, 'left', -oLi.offsetWidth, 5, function () {
                    oLi.remove();
                })
            }

        })


        function move(ele, prop, end, speed, cb) {
            var cur = parseInt(getComputedStyle(ele)[prop]);
            speed = end > cur ? speed : -speed;
            var t = setInterval(function () {
                // console.log(speed);
                // 每次都在当前位置的基础上+20
                cur += speed;

                ele.style[prop] = cur + 'px';
                // 当前位置与终点位置的差值 在 20以内
                if (Math.abs(end - cur) <= Math.abs(speed)) {
                    clearInterval(t);
                    // 万一不能被20整除的时候，强制到达终点
                    ele.style[prop] = end + 'px';
                    cb && cb();
                }
            }, 10)
        }



        function randColor(min, max) {
            let r = rand(0, 256);
            let g = rand(0, 256);
            let b = rand(0, 256);
            return `rgb(${r},${g},${b})`
        }



        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }


    </script>

</body>

</html>